<template>
    <div v-for="(article, index) in articles" :key="index">
      作者编号：{{ article.authorId }} <span> 发布时间：{{ article.createdAt }}</span>
      <h1>{{ article.title }}</h1>
      <p>{{ article.description }}</p>
      <p>查看更多...</p>
      <hr color="#EBEDF0" />
    </div>
</template>

<script>
import axios from "axios"; // 导入 Axios 库，用于发送 HTTP 请求

export default {
  data() {
    return { 
      articles: [] // 初始化 articles 数组，用于存储从服务器获取的文章数据
    };
  },
  async created() {
    // 使用 async 关键字标记 created 钩子函数为异步函数，允许在函数内部使用 await 关键字
    try {
      // 使用 await 关键字等待 axios.get 发送的异步请求完成
      // axios.get 是一个异步函数，返回一个 Promise 对象
      // 这行代码会暂停执行，直到 Promise 被解决，这里并没有使用回调函数，是一种异步操作同步化的做法
      const response = await axios.get("/api/articles");
      
      // 一旦请求成功，将服务器返回的数据（response.data）赋值给组件的 articles 属性
      // Vue 会检测到 articles 属性的变化，并自动更新视图，显示新的文章数据
      this.articles = response.data;
    } catch (error) {
      // 如果请求过程中发生错误（例如网络问题或服务器返回错误状态码），catch 块会捕获这个错误
      // 并将其记录到控制台，方便调试和排查问题
      console.error("获取文章数据失败:", error);
    }
  },
};
</script>
